<template>
  <div class="captcha-container">
    <h2>验证码示例</h2>
    <!-- 显示验证码图片，点击图片时刷新验证码 -->
    <div v-if="captchaUrl">
      <img :src="captchaUrl" alt="验证码" @click="fetchCaptcha" style="cursor: pointer;" />
    </div>

    <!-- 验证码输入框和提交按钮 -->
    <div class="input-container">
      <el-input v-model="captchaInput" placeholder="请输入验证码"></el-input>
      <el-button type="primary" @click="submitCaptcha">提交</el-button>
    </div>
  </div>

  <el-carousel :interval="4000" type="card" width="100%" height="400px">
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <img :src="item" :alt="`Image ${index + 1}`" class="carousel-image" />
    </el-carousel-item>
  </el-carousel>


</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

// 用于存储验证码图片的 URL
const captchaUrl = ref('')
// 用于存储用户输入的验证码
const captchaInput = ref('')
const images = ref([
  'src/assets/Photo/01.jpg',
  'src/assets/Photo/02.jpg',
  'src/assets/Photo/03.jpg',
  'src/assets/Photo/04.jpg',
])

// 获取验证码图片
const fetchCaptcha = () => {
  // 使用时间戳确保每次都获取新的验证码图片，防止缓存
  captchaUrl.value = `/api/common/verify?timestamp=${new Date().getTime()}`;
  console.log('获取验证码图片', captchaUrl.value);
};

// 提交验证码逻辑
const submitCaptcha = async () => {
  try {
    const response = await axios.post('/submit-captcha', {
      captcha: captchaInput.value
    });
    console.log('验证码验证结果', response.data);
  } catch (error) {
    console.error("提交验证码失败", error);
  }
}

// 页面加载时自动获取验证码
fetchCaptcha();
</script>

<style scoped>
.captcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-container {
  margin-top: 20px;
}

img {
  margin: 10px 0;
  border: 1px solid #ccc;
  padding: 5px;
  cursor: pointer; /* 鼠标悬停时显示指针，提示可点击 */
}
</style>
